import React, { useEffect, useState,Fragment } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {Card, Table, DatePicker, Row, Col, Input, Button, Select, message, Divider, Popconfirm,Modal} from 'antd'
import { queryRentCount } from '@/services/login'
import {getCancelUserBank, getCountChannelList, getQueryUserListBaseInfo, getUserBankList} from "@/services/channel";
import moment from "moment/moment";
import { exportUserListBaseInfo } from '@/services/login'
import MemberService from "@/pages/Member/services";
const { RangePicker } = DatePicker

const Count = () => {
  const [total, setTotal] = useState(0)
  const [pageInfo, setPageInfo] = useState({
    pageNumber: 1,
    pageSize: 10,
    username:'',//姓名
    idcard:'',
    telephone:'',//手机号
    channelCode:'',//当前渠道

      })
  const [list, setList] = useState([])
  const [userChannelHistoryList, setUserChannelHistoryList] = useState([])
  const [username, setName] = useState('')//姓名
  const [idcard, setIdcard] = useState('')//身份证号
  const [telephone, setPhoneNo] = useState('')//手机号
  const [channelCode, setCurrentChannelCode] = useState('')//当前渠道
  const [channelList, setChannelList] = useState([]) //渠道标识下拉
  const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
  const styles = {
    spanWidthStyles: {
      width: '70px',
      'text-align-last': 'justify',
      display: 'inline-block'
    },
    formItemStyles: {
      width: '200px'
    }
  }
  const [userBankList, setUserBankList] = useState([])//绑卡列表
  const [uid, setUid] = useState('')//解绑 卡id

  const onChangeTime = (date, dateString) => {
    const [createTimeStart, createTimeEnd] = dateString
    if (!createTimeStart) {
      setPageInfo({
        ...pageInfo,
      })
      setOrderTime(null)
    } else {
      setOrderTime([moment(createTimeStart), moment(createTimeEnd)])
    }
  }
 const handleOverDueChange = overDue =>{
   setOverDue(overDue)
  }
        const loadList = async () => {
    try {
      const { data } = await getCountChannelList()
      setChannelList(data)
    } catch (error) {
      message.error(error.message)
    }
    getQueryUserListBaseInfo(pageInfo).then(res => {
      setList(res.data.records)
      // setUserChannelHistoryList(res.data.records.UserChannelHistoryList)
      setTotal(res.data.total)
    })
  }

  useEffect(() => {
    loadList()
  }, [pageInfo])

  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      align: 'center'
    },
    {
      title: '身份证号',
      dataIndex: 'idcard',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'telephone',
      align: 'center'
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    // {
    //   title: '当前渠道',
    //   dataIndex: 'currentChannelCode',
    //   align: 'center'
    // },
    // {
    //   title: '操作',
    //   dataIndex: 'name4',
    //   align: 'center',
    //   render: (text, record) => (
    //       <span>
    //          <Button type="link" size="small" onClick={() => lookChannelDetail(record)}>
    //          查看历史渠道
    //         </Button>
    //            <Button type="link" size="small" onClick={() => lookUserBankList(record.uid)}>
    //          查看绑卡
    //         </Button>
    //     </span>

    //   )
    // }
  ]
  const columnsChannel = [

    {
      title: '时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    {
      title: '渠道标识',
      dataIndex: 'channelName',
      align: 'center'
    },
  ]
  const columns1 = [

    {
      title: '用户姓名',
      dataIndex: 'realName',
      align: 'center'
    },
    {
      title: '身份证号',
      dataIndex: 'idCardNo',
      align: 'center'
    },
    {
      title: '银行卡号',
      dataIndex: 'bankCardNo',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'phoneNo',
      align: 'center'
    },
      {
          title: '绑卡状态',
          dataIndex: 'signStatus',
          align: 'center',
          render:(text,record) =>(
              <span>
                    {signStatus(text)}
              </span>
          )
      },
    {
      title: '操作',
      dataIndex: 'signStatus',
      align: 'center',
      render: (text, record) => (
        <Popconfirm
          title='确定要解绑吗？'
          onConfirm={() => cancelUserBankItem(record)}
        >
            {
                text ==='02' && <a>解绑</a>
            }
        </Popconfirm>

      )
    }
  ]
  const lookChannelDetail =  (record) => {
    setVisible(true)
    setUserChannelHistoryList(record.userChannelHistoryList)
  }
  //查看绑卡
  const lookUserBankList = async (param) => {
      setUid(param)
      try {
          const { data } = await getUserBankList(param)
          console.log(data,'555555')
          setUserBankList(data)
      } catch (error) {
          message.error(error.message)
      }
    setVisible1(true)
  }
  const cancelUserBankItem = async (record) => {

    try{
        const {httpStatus} = await getCancelUserBank({ cardId:record.cardId})
        if(httpStatus === 200){
            message.success('解绑成功')
          //lookUserBankList(uid)
        }
    }catch (error){
        message.error(error.message)
    }

    }

    const PaginationOptions = {
    current: pageInfo.pageNumber,
    pageSize: pageInfo.pageSize,
    total,
    showTotal: total => {
      return `共${total}条`
    },
    onChange: pageNumber => {
      setPageInfo({ ...pageInfo, pageNumber })
    }
  }
  const handleChange = channelCode => {

    setCurrentChannelCode(channelCode)
  }
  //查询
  const onSearchBtn = () => {
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      username,//姓名
      idcard,//身份证号
      telephone,//手机号
      channelCode,//渠道标识
    })
  }
  const onReset =() =>{
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      username:'',//姓名
      idcard:'',//身份证号
      telephone:"",//手机号
      channelCode:'',//渠道标识
    })
    setIdcard('')
    setCurrentChannelCode('')
    setName('')
    setPhoneNo('')
    setChannelList([])
  }
 const exportRent1 = () =>{
   exportUserListBaseInfo({ ...pageInfo, pageNumber: -1, pageSize: -1,
     username,//姓名
      idcard,//身份证号
     telephone,//手机号
     channelCode,//渠道标识
   }).then(res => {
     const objectURL = URL.createObjectURL(res)
     const btn = document.createElement('a')
     const body = document.querySelector('body')
     if (body) {
       body.appendChild(btn)
     }
     btn.download = `会员列表.xlsx`
     btn.href = objectURL
     btn.click()
     if (body) {
       body.removeChild(btn) // 删除标签
     }

     message.success('导出成功')
   })
 }
  const handleCancel = () => {
    setVisible(false)
      setVisible1(false)
  }
  // 绑卡状态: 01-> 待签约; 02-> 已签约； 03->已解约, 04->绑卡失败
  const signStatus = (status) =>{
      let info = ''
      switch (status){
           case '01':
           info ='待签约'
           break
          case '02':
              info ='已签约'
              break
          case '03':
              info ='已解约'
              break
          default:
              info ='绑卡失败'
      }
      return info
  }
  return (
    <Fragment>
      <PageHeaderWrapper title="会员列表">
         <Card style={{ marginBottom: 20 }}>
          <Row gutter={[5, 20]}>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>姓名：</span>
                <Input style={styles.formItemStyles} placeholder="请输入姓名"
                       value={username}
                       onChange={e => setName(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>身份证号：</span>
                <Input style={styles.formItemStyles} placeholder="请输入身份证号"
                       value={idcard}
                       onChange={e => setIdcard(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>手机号：</span>
                <Input style={styles.formItemStyles} placeholder="请输入手机号"
                       value={telephone}
                       onChange={e => setPhoneNo(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            {/* <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>当前渠道：</span>
                <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) =>
                        option.props.children
                            .toLowerCase()
                            .indexOf(input.toLowerCase()) >= 0
                    }
                    defaultValue={channelCode}
                    value={channelCode}
                    style={{ width: 120 }}
                    onChange={handleChange}
                    allowClear
                >
                  <Option value="">全部</Option>
                  {channelList.map(item => (
                      <Option value={item.channelCode} key={item.channelCode}>
                        {item.channelName}
                      </Option>
                  ))}
                </Select>
              </div>
            </Col> */}
            <Col span={6}>
             <Button type="primary" onClick={onSearchBtn}>查询</Button>
             <Button type="default" onClick={onReset}>重置</Button>
             <Button type="danger" onClick={exportRent1}>导出</Button>
           </Col>
          </Row>
        </Card>
        <Card>
          <Table
            rowKey="orderNo"
            dataSource={list}
            columns={columns}
            pagination={PaginationOptions}
          />
        </Card>
      </PageHeaderWrapper>
      <Modal
          title={'历史渠道'}
          visible={visible}
          // onOk={handleOk}
          onCancel={handleCancel}
          footer={null}
      >
        <Table
            rowKey="orderNo"
            dataSource={userChannelHistoryList && userChannelHistoryList}
            columns={columnsChannel}
            width={360}
        />
      </Modal>
      <Modal
        title={'查看绑卡'}
        visible={visible1}
        onCancel={handleCancel}
        footer={null}
        width={800}
      >
        <Table
          rowKey="orderNo"
          dataSource={userBankList}
          columns={columns1}
          width={400}
        />
      </Modal>
    </Fragment>
  )
}

export default Count
